<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="../../js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.12/dayjs.min.js"></script>
</head>
<body>
<div class="root">
    <h2>显示格式化后的时间</h2>
    <span>没有格式化之前的时间是{{time}}</span>
    <br>
    <br>
    <!--    使用计算属性-->
    <span>使用计算属性实现:格式化之后的时间是:{{formatTime}}</span>
    <br>
    <br>
    <!--    使用方法实现-->
    <span>使用方法实现:格式化之后的时间是:{{getFmtTime()}}</span>
    <br>
    <br>
    <!--    使用过滤器       time | 过滤器名词-->
    <span>  使用过滤器实现:格式化之后时间是:{{time | timeFoemater('YYYY年MM月DD日 hh时mm分ss秒')}}</span>
</div>
<script>
    const vm = new Vue({
        el: '.root',
        data: {
            time: Date.now()  //获取当前时间的时间戳
        },
        methods: {
            getFmtTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        computed: {
            formatTime: {
                get() {
                    // 使用dayjs库将时间戳传入并进行格式化
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            }
        },
        // 过滤器的本质就是函数   可以对数据进行加工  调用方法: {{参数 | 过滤器}}  将参数传给过滤器,返回值替换{{}} 插值语法
        // 如果需要传入其他参数,可以使用()接收,管道符前面的参数总是在最前面
        filters: {
            timeFoemater(time, str) {
                return dayjs(time).format(str)
            }
        }

    })
    /**
     * 过滤器：
     *  语法：
     *      注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
     *      使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名",不能使用v-model绑定过滤器
     *
     *  备注：
     *     过滤器可以接收额外参数，多个过滤器也可以串联       例如: 参数 | 过滤器1 |过滤器2  执行顺序时先过滤器1,再将过滤器1返回的值给过滤器2
     *     并没有改变原本的数据，而是产生新的对应的数据
     *
     *  再vue实例中定义的实例里面创建的过滤器是局部过滤器,局部过滤器只能被当前vue实例使用
     *  如果需要创建全局过滤器:
     *                  Vue.filter('过滤器名称',过滤器(value){})
     *
     */
</script>
</body>
</html>